<template>
	<view class="main">
		<u--form labelPosition="left" :model="formData" ref="form1">
			<view class="module">

				<u-form-item label="名称" prop="name" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.name" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="单价" prop="price" labelWidth="80" required borderBottom ref="item1">
					<u--input  v-model="formData.price" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="重量" prop="weight" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.weight" border="none" placeholder="请输入"></u--input>
					<span slot="right">kg</span>
				</u-form-item>
				<u-form-item label="总价" prop="money" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.money" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="完工照片" prop="images" labelWidth="160" :borderBottom="false" ref="item1">
				</u-form-item>
				<uploadFile :fileList1="fileList1" :limit="9" @getImg="getimages" />
			</view>
		</u--form>

		<!--底部按钮-satrt-->
		<view class="btn" v-if="!isEdit">
			<view class="btn-item" @click="submit">提交</view>
		</view>
		<!--底部按钮-end-->

		<!--底部按钮-satrt-->
		<view class="btn" v-if="isEdit">
			<view class="btn-item btn-item-2 btn-item-left" @click="delLog">删除</view>
			<view class="btn-item btn-item-2 btn-item-right" @click="submit">提交</view>
		</view>
		<!--底部按钮-end-->


		<u-datetime-picker :show="showinTime" :value="inTime" mode="date" closeOnClickOverlay @confirm="TimeConfirm"
			@cancel="TimeClose" @close="TimeClose"></u-datetime-picker>
	</view>
</template>

<script>
	import db from '@/common/localstorage.js'

	export default {

		onLoad(options) {
			this.isEdit = options.id ? true : false
			this.dataid = options.id
			if(this.isEdit){
				this.getInfo()
			}

		},

		data() {
			return {
				dataid: '',
				isEdit: false,
				fileList1: [],
				showinTime: false,
				inTime: Number(new Date()),
				timeType: '',


				formData: {
					name: '',
					money: '',
					weight: '',
					price: '',
					images: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['change']
					},
					money: {
						type: 'number',
						required: true,
						message: '请填写',
						trigger: ['change']
					},
					weight: {
						type: 'number',
						required: true,
						message: '请填写',
						trigger: ['change']
					},
					price: {
						type: 'number',
						required: true,
						message: '请填写',
						trigger: ['change']
					},
				},

			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			getimages(val) {
				this.fileList1 = val
				this.formData.images = this.fileList1.map(o => {
					return o.url
				}).join(',')
			},
			timeSelect(type) {
				this.timeType = type
				this.showinTime = true
			},

			TimeClose() {
				this.showinTime = false
			},
			TimeConfirm(e) {
				this.showinTime = false
				this.queryParams[this.timeType] = e.value + ''

			},
			getInfo(){
				let that = this
				this.$postjson('/api/RqComplete/info',{id:this.dataid}).then(res=>{
					this.formData = res.data.data
					let tem =  this.formData.images?this.formData.images.split(','):[]
					tem.forEach(v=>{
					 that.fileList1.push({url: that.baseUrl +v})
					})
					console.log(that.fileList1)
				})
			},


			delLog() {
				let that = this
				this.$modal.confirm('此操作将会删除该记录').then(res => {
					that.$postjson('/api/RqReceiveRecord/del', {
						id: that.dataid
					}).then(res => {
						if (res.data.code == 200) {
							setTimeout(v => {
								uni.navigateBack()
							}, 1000)
							uni.$u.toast('操作成功')
						} else {
							that.$modal.msgInfo(res.data.msg)
						}
					})
				})
			},

			submit() {

				let that = this
				if (!this.formData.images) {
					uni.$u.toast('请上传完工照片')
					return
				}
				let url = this.isEdit?'/api/RqComplete/edit':'/api/RqComplete/add'
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					uni.showLoading({
						title: '提交中'
					});
					that.$postjson(url, that.formData).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							setTimeout(v => {
								uni.navigateBack()
							}, 1000)
							uni.$u.toast('操作成功')
						} else {
							uni.$u.toast(res.data.msg)
						}
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('请完善表单')
				})
			},



		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F3F3F5;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 118rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-bottom: 68rpx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 30upx;
		width: calc(100% - 60upx);
		display: flex;
		justify-content: space-between;

		.btn-item {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			width: 552rpx;
			height: 88rpx;
			background: linear-gradient(138deg, #12C66B 0%, #11AA66 100%);
			border-radius: 44rpx;
			margin: auto;
			line-height: 88upx;
		}

		.btn-item-2 {
			width: 276rpx;
		}

		.btn-item-left {
			background: #fff !important;
			border: 2rpx solid #11AA66;
			color: #11AA66;
		}
	}

	.main {
		// margin-top: 24upx;
		padding: 0 32upx;
		background: #fff;

		::v-deep .u-form-item__body {
			// padding: 16upx 0 !important;
		}

		.module {
			background: #fff;
			padding: 20upx;

			.module-flie {
				.module-flie-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					position: relative;
					width: 100%;
					margin-bottom: 30upx;
				}

				.module-flie-title::after {
					content: '';
					width: 8rpx;
					height: 28rpx;
					background: linear-gradient(180deg, #11AA66 0%, #12C66B 100%);
					position: absolute;
					left: -20upx;
					bottom: 8upx;

				}

				.module-flie-card {
					.flie-inner {
						width: 200rpx;
						height: 190rpx;
						background: #F4F4F5;
						border-radius: 16rpx;
						border: 1rpx solid #DDDDDD;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #11AA66;

					}

					.flie-inner-img {
						width: 44upx;
						height: 42upx;
						margin-bottom: 30upx;
					}
				}

			}

			::v-deep .u-form-item__body {
				padding: 32upx 0 !important;
			}

			::v-deep .u-form-item__body__left__content__required {
				// left: auto !important;
				// right: 3px !important;
				font-size: 32upx;
				margin-top: -2px;
			}

			::v-deep .u-form-item__body__right {
				padding-left: 20upx;
			}

			::v-deep .u-form-item__body__left__content__label {
				font-size: 32upx;
			}


			::v-deep .u-border {
				border: none;
			}

			::v-deep .u-textarea__field {
				min-height: 24px;
			}

			::v-deep .uni-textarea-textarea {
				font-size: 32upx;
			}


			::v-deep .u-textarea {
				padding: 0;
			}

			::v-deep .uni-textarea-placeholder {
				color: rgb(192, 196, 204) !important;
				font-weight: 400;
				font-size: 28upx;
			}

			.topClass {
				::v-deep .u-form-item__body {
					flex-direction: column !important;

					.u-form-item__body__right {
						padding-left: 0px;
					}
				}
			}

		}


	}


	.selectText {
		font-size: 32upx;
	}
</style>